@import './common.less';

.action-sheet {
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  .content {
    background: white;
    text-align: center;
    color: #2e2e36;
    .title {
      height: 90/@ppr;
      font-size: 32/@ppr;
      color: #2e2e36;
      font-weight: bold;
      line-height: 90/@ppr;
      background: #f5f5f8;
    }
    .option-cell {
      height: 110/@ppr;
      font-size: 30/@ppr;
      line-height: 110/@ppr;
      border-top: 1px solid #e8ebed;
    }
  }
}

.gun-modal {
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  .content {
    background: white;
    text-align: center;
    .title {
      height: 124/@ppr;
      line-height: 124/@ppr;
      font-size: 36/@ppr;
      color: rgb(44, 44, 44);
    }
    .gun-view {
      .scrollable();
      height: (126 * 4) / @ppr;
      .cell-row {
        border-top: 1px solid rgb(238, 238, 238);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .gun-cell {
          flex: 1;
          height: 126/@ppr;
          line-height: 126/@ppr;
          color: rgb(129, 128, 134);
          font-size: 34/@ppr;
          &.active {
            background: #eeeeee;
          }
          border-right: 1px solid rgb(238, 238, 238);
          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
}

.alert-logout {
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .content {
    width: 522/@ppr;
    border-radius: 8/@ppr;
    background: white;
    padding-top: 50/@ppr;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .icon {
      width: 80/@ppr;
      height: auto;
    }
    .title {
      margin-top: 20/@ppr;
      font-size: 30/@ppr;
      color: rgb(46, 46, 54);
    }
    .btn-row {
      margin-top: 50/@ppr;
      align-self: stretch;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: stretch;
      height: 80/@ppr;
      color: rgb(146, 146, 146);
      font-size: 32/@ppr;
      .hairline(top, rgb(232, 234, 238));
      .action-btn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        &.cancel {
          color: rgb(70, 70, 76);
          .hairline(right, rgb(232, 234, 238));
        }
      }
    }
  }
}
